<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/common_head :: commonHeader('首页')"/>
    <link rel="stylesheet" th:href="@{/static/css/custom.css}"/>

    <!--通知样式-->
    <style type="text/css">
        .information {
            display: none;
            font-weight: bold;
            font-size: larger;
            line-height: 3em;
            padding: initial;
            box-shadow: 2px 2px 10px 1px #7d7a7a;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        #noticeList {
            position: fixed;
            width: 550px;
            border: 2px white solid;
            bottom: 10px;
            right: 10px;
            z-index: 100;
            background-color: white;
            box-shadow: 2px 2px 10px 1px #ccc;
            border-radius: 10px;
            padding: 10px;
        }

        #noticeItem {
            overflow: hidden;
        }

        #noticeList, #noticeItem {
            max-height: 600px;
        }

        .item {
            border: 1px #ddd solid;
            margin: 10px auto;
            padding: 5px 20px;
            border-radius: 5px;
            line-height: 1.3em;
            font-size: 1.1em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-y: scroll;
        }
    </style>

</head>

<body class="gray-bg">

<div id="noticeList" hidden>
    <a class="fa fa-sort-down fa-3x" href="javascript:;" style="position: absolute;top: -28px;left: -8px;color: #999;"
       onclick="closeNoticeList()" title="最小化"></a>
    <a class="fa fa-trash-o fa-2x" href="javascript:;" style="position: absolute;top: -13px;left: 98%;color: #999;"
       onclick="deleteNotice()" title="删除所有通知"></a>
    <div id="noticeItem"></div>
</div>

<!--首页通知-->
<div class=" wrapper-content ">
    <!--样品申请单收货-->
    <div id="sampleNotice" class="col-md-12 titleInfoBar information" style="display: block">

    </div>
    <!--信息记录通知-->
    <div id="xxjl" class="col-md-12 titleInfoBar information">
        <span></span>
    </div>

    <!--货源记录通知-->
    <div id="hyjl" class="col-md-12 titleInfoBar information">
        <span></span>
    </div>

    <!--非生产性申请单通知-->
    <div id="nproRequest" class="col-md-12 titleInfoBar information">
        <span></span>
    </div>

    <!--生产性申请单通知-->
    <div id="proRequest" class="col-md-12 titleInfoBar information">
        <span></span>
    </div>

    <!--样品申请单通知-->
    <div id="sampleRequest" class="col-md-12 titleInfoBar information">
        <span></span>
    </div>

    <!--供应商资质证书过期通知-->
    <div id="vendorCertificate" class="col-md-12 titleInfoBar information">
        <span></span>
    </div>

    <!--供应商报告库预警-->
    <div id="vendorReport" class="col-md-12 titleInfoBar information">
        <span></span>
    </div>

</div>
</body>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script type="text/javascript" th:src="@{/static/js/plugins/jquery-layout/jquery.layout-latest.js}"></script>

<script>
    $(function () {
        //预警数据
        warningInfo();
        //查询通知数据
        clock();
        //样品单入库通知
        sampleNotice();
    });

    //通知消息轮询
    let clockErrorNum = 0;
    let int = self.setInterval("clock()", 30000);
    //预警数据轮询
    self.setInterval("warningInfo()", 30 * 1000);

    function warningInfo() {
        let urlArr = [];
        //信息记录通知
        urlArr.push(ctxPath + "/inforecord/getConfirmCount");
        //货源记录通知
        urlArr.push(ctxPath + "/supplyGood/getConfirmCount");
        //非生产性申请单通知
        urlArr.push(ctxPath + "/nproPurchRequestItem/getCount");
        //生产性申请单通知
        urlArr.push(ctxPath + "/proPurchRequestItem/getCount");
        //样品申请单通知
        urlArr.push(ctxPath + "/sampleRequest/getCount");
        //供应商资质证书过期通知
        urlArr.push(ctxPath + "/vendor/vendorCertificate");
        //供应商报告库预警
        urlArr.push(ctxPath + "/reportRepository/reportNotice");

        //预警类型与URLArr顺序要一致
        let type = ['xxjl', 'hyjl', 'nproRequest', 'proRequest', 'sampleRequest', 'vendorCertificate', 'vendorReport'];

        for (let i in urlArr) {
            getWarningData(urlArr[i], type[i]);
        }
    }

    //获取预警数据，显示
    function getWarningData(url, type) {
        $.ajax({
            url: url,
            dataType: 'JSON',
            success: function (res) {
                if (res.code == 500) {
                    return false;
                }
                let result = res.result;
                let text = null;
                if (type == 'xxjl' && result != 0) {
                    text = "您有&nbsp;" + result + " 条 <span style='color:red'>信息记录</span> 待确认！";
                } else if (type == 'hyjl' && result != 0) {
                    text = "您有&nbsp;" + result + " 条 <span style='color:red'>货源记录</span> 待确认！";
                } else if (type == 'nproRequest' && (result[1] != 0 || result[2] != 0)) {
                    text = "您有&nbsp;<span style='color:red'>非生产性申请单</span> 未处理状态 " + result[1] + " 条&nbsp;/&nbsp;询价比价中 " + result[2] + " 条";
                } else if (type == 'proRequest' && (result[1] != 0 || result[2] != 0)) {
                    text = "您有&nbsp;<span style='color:red'>生产性申请单</span> 未处理状态 " + result[1] + " 条&nbsp;/&nbsp;询价比价中 " + result[2] + " 条";
                } else if (type == 'sampleRequest' && (result[1] != 0 || result[2] != 0)) {
                    text = "您有&nbsp;<span style='color:red'>样品申请单</span> 未处理状态 " + result[1] + " 条&nbsp;/&nbsp;询价比价中 " + result[2] + " 条";
                } else if (type == 'vendorCertificate' && (result.expired != 0 || result.nearly != 0)) {
                    text = "您的&nbsp;<span style='color:red'>资质证书</span> 即将过期 " + result.nearly + " 份&nbsp;/&nbsp;已过期 " + result.expired + " 份，请尽快更新资质证书！";
                } else if (type == 'vendorReport' && result.nearly != 0) {
                    text = "您的&nbsp;<span style='color:red'>报告库</span> 有 " + result.nearly + " 份报告即将过期 ，请尽快更新报告！";
                } else {
                    $("#" + type).fadeOut(1000);
                }
                if (text) {
                    showTitleInfoBar($("#" + type), text);
                }
            }
        });
    }

    //查询通知数据
    function clock() {
        if (parent.$("#showQuery").is(":visible") == false) {
            //隐藏时查询
            Page.ajaxGET(ctxPath + "/noticeMainInfo/noticeList", "", function (res) {
                clockErrorNum = 0;
                if (res.result.length > 0) {
                    parent.$("#showQuery").show();
                    if (res.result.length > 99) {
                        parent.$("#showQuery").text("99+");
                    } else {
                        parent.$("#showQuery").text(res.result.length);
                    }
                    //将数据动态添加到item中
                    addNoticeItem(res.result);
                    $("#noticeList").show()
                } else {
                    parent.$("#showQuery").hide();
                    //关闭通知列表
                    $("#noticeList").hide()
                }
            }, {
                'failFn': function (r) {
                    // 调用异常
                    clockErrorNum += 1;
                    stopInterval();
                    startInterval(10000 * clockErrorNum)
                }
            });
        }
    }

    /**
     * 停止定时器
     */
    function stopInterval() {
        window.clearInterval(int);
    }

    /**
     * 开始定时器
     */
    function startInterval(time) {
        int = self.setInterval("clock()", time);
    }

    /**
     * 关闭消息通知
     */
    function closeNoticeList() {
        $("#noticeList").hide();
    }

    /**
     * 将通知动态添加到通知列表中
     * @param items
     */
    function addNoticeItem(items) {
        let html = '';
        let detail;
        for (let i in items) {
            detail = items[i].createTime + ' : ' + items[i].content;
            html += '<div class="item" index=' + i + ' value=' + items[i].id + '>' +
                '<a class="fa fa-close" href="javascript:;" style="position: absolute;left: 5px;color: #999;" onclick="removeNotice(' + i + ',' + items[i].id + ')" title="删除通知"></a>' +
                '<a  onclick="showDetail(' + items[i].id + ',\'' + detail + '\',' + i + ')" title="' + items[i].content + '">' + items[i].content + '</a></div>';
        }
        $("#noticeItem").html(html);
    }

    /**
     * 点击通知显示详情
     */
    function showDetail(id, content, index) {
        //弹窗显示详细具体内容
        layer.open({
            title: '',
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '240px'], //宽高
            content: content
        });
        //删除列表消息
        removeNotice(index, id);
    }

    /**
     * 删除列表消息
     */
    function removeNotice(index, id) {
        //消息个数
        let count = parent.$("#showQuery").text() - 1;
        if (count == 0) {
            parent.$("#showQuery").hide();
            closeNoticeList();
        } else {
            parent.$("#showQuery").text(count);
        }

        //当前通知列表删除点击的消息
        $(".item[index='" + index + "']").remove();

        let ids = [id];
        //删除数据库中的通知
        deleteNotice(ids);
    }

    /**
     * 删除数据库中的通知
     */
    function deleteNotice(ids) {
        if (!ids) {
            ids = [];
            $(".item").each(function (index, item) {
                ids.push($(item).attr('value'));
            })
        }
        //删除数据库中的通知
        $.ajax({
            type: "POST",
            url: ctxPath + "/noticeMainInfo/deleteNotice",
            data: {"ids": ids},
            error: function () {
                Dialog.errorMsg("操作失败！");
            }
        });
    }

    //样品单入库通知
    function sampleNotice() {
        Page.ajaxGET(ctxPath + "/sampleRequest/sampleNotice", "", function (res) {
            if (res.poNo != undefined) {
                $("#sampleNotice").html("样品订单：" + "<span style='color: red'>" + res.poNo + "</span>" + "," + "行项目：" + res.itemNo + "," + "收货日期：" + res.time + " ！");
            }
        });
    }
</script>
</html>